import React from "react";
import axios from "axios";
import { Button, Card, Checkbox, Col, Form, Input, message, Row } from "antd";
import { useNavigate } from "react-router-dom";

const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const Login = () => {
  const navigate = useNavigate()
  const onFinish = async (values) => {
    console.log("Success:", values);
    let url = "http://localhost:3000/users";
    let res = await axios.get(url, {
      params: values, //向服务器发送query数据
    });
    console.log("登录", res);
    let { code, msg, data } = res.data;
    if (code == 0) {
      message.error(msg);
    } else {
      message.success(msg);
      //本地持久化缓存用户登录状态
      localStorage.setItem("travel-user-info", JSON.stringify(data));
      navigate('/')
    }
  };
  return (
    <Row
      justify="center"
      align="middle"
      style={{ height: "100vh", background: "#789ADD" }}
    >
      <Col span={8}>
        <Card title="登录" extra={<a href="#">More</a>}>
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item name="remember" valuePropName="checked" label={null}>
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item label={null}>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Col>
    </Row>
  );
};
export default Login;
